<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:jsf="http://xmlns.jcp.org/jsf"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <head jsf:id="head">     
        <title>Create Event</title>
        <link href="css/meteocal.css" rel="stylesheet" type="text/css"/>
    </head>
    <body jsf:id="body" class="noFrame">   
        <!--Element of the first line on the top bar-->
        <div id="topHeader">
             <img id="logo" src="Images/meteocalsnow.png"  name="meteocalLogo" title="meteocallogo"/>

             <h1 id="userCalendar" style="margin-left: 52px;margin-top: 6px">#{loginBean.loggedUser.username}'s Calendar</h1>   
              
            <div class="logoutForm">         
                <h:form>
                    <p:commandButton value="Logout" action="#{loginBean.logout()}"/>                     
                </h:form>
            </div>
        </div>
        
        <div id="searchHeader">
            <h:form id="search">
                <p:inputText id="searchText" value="#{SearchController.searchedUser}" />
                <p:commandButton id="searchButton" value="Search"  action="#{SearchController.searchUser()}"/>    
            </h:form>   
        </div>
        
        <div id="LeftHeader">
            <ul class="buttonList">
                <h:form>
                    <li><p:commandButton class="leftBarButton"  value="Home" action="#{scheduleController.loadOwnCalendar()}"/></li>   
                    <li><p:commandButton class="leftBarButton"  value="AddEvent" action="#{EventController.newEvent}"/></li>   
                    <li><p:button class="leftBarButton"  value="Notifications" outcome="notifications"/></li>   
                    <li><p:button class="leftBarButton"  value="Settings" outcome="settings"/> </li> 
                </h:form>
            </ul>

        </div>
         
        <!-- Common Header -->
        
            <h:form>               
                <div id="eventForm">

                    <h1>Event Management</h1>

                    <h:panelGrid columns="2"> 
                        <p:outputLabel for="title" value="Title:"/>
                        <p:inputText id="title" value="#{EventController.event.title}" required="true" requiredMessage="The title is required.">
                            <f:validateLength minimum="5" maximum="40"/>
                        </p:inputText>
                        
                        <p:outputLabel for="location" value="Location" />          
                        <p:inputText id="location" value="#{EventController.event.location}" required="true" requiredMessage="The location is required." >
                            <f:validateLength minimum="2" maximum="40"/>
                        </p:inputText>
                        
                        <p:outputLabel for="city" value="City:"/>
                        <p:inputText id="city" value="#{EventController.event.city}">
                            <f:validateLength maximum="40"/>
                        </p:inputText>
                        
                        <p:outputLabel for="startingDate" value="Starting Date:" />
                        <p:calendar id="startingDate" value="#{EventController.event.date}" locale="it" navigator="true" pattern="dd-MM-yyyy" required="true" requiredMessage="The Starting Date is required."/>
                        
                        <p:outputLabel for="endingDate" value="Ending Date:" />
                        <p:calendar id="endingDate" value="#{EventController.endate}" locale="it" navigator="true" pattern="dd-MM-yyyy" required="true" requiredMessage="The Ending Date is required." />
                        
                        <p:outputLabel for="startingTime" value="Starting Time:" />
                        <p:calendar id="startingTime" value="#{EventController.event.startingTime}" pattern="HH:mm a" timeOnly="true" required="true" requiredMessage="The Starting Time is required." />
                        
                        <p:outputLabel for="endingTime" value="Ending Time:" />
                        <p:calendar id="endingTime" value="#{EventController.event.endingTime}" pattern="HH:mm a" timeOnly="true" required="true" requiredMessage="The Ending Time is required." />
                        
                        <p:outputLabel for="repeat" value="Repeat Type:"/>
                        <p:selectOneMenu id="repeat" value="#{EventController.repeats}" style="width:125px" >
                            <f:selectItem itemLabel="No" itemValue="no" />
                            <f:selectItem itemLabel="EveryDay" itemValue="everyday" />
                            <f:selectItem itemLabel="EveryWeek" itemValue="everyweek" />
                            <f:selectItem itemLabel="EveryMonth" itemValue="everymonth" />
                            <f:selectItem itemLabel="EveryYear" itemValue="everyyear" />
                        </p:selectOneMenu>
                        
                        <p:outputLabel for="untillDate" value="Untill:" />
                        <p:calendar id="untillDate" value="#{EventController.untillDate}" locale="it" navigator="true" pattern="dd-MM-yyyy" />
                        
                        <p:outputLabel id="descriptionCounter" for="description" value="Description (optional):"/>
                        <p:inputTextarea class="notResize" counter="descriptionCounter" maxlength="1000" counterTemplate="Description (optional) {0} characters remaining." id="description" autoResize="false" rows="5" cols="27" value="#{EventController.event.description}"    />

                    </h:panelGrid>
                  
                </div>    
                <div id="rightEventForm">
                    
                    <br />                    
                    <div id="badConditions"> 
                        <p:outputLabel for="bad" value="Bad Conditions: &nbsp;&nbsp;"/>
                        <p:inputSwitch id="bad" value="#{EventController.bad}">
                            <p:ajax update="badConditionsDiv" />
                        </p:inputSwitch>
                    </div>
               
                    <br />
                    
                    <p:panel  style="width:500px;border:none" id="badConditionsDiv" visible="#{EventController.bad}">
                            
                        <!-- bad weather layer -->
                    
                        <h:panelGrid cellpadding="10px" width="450px" columns="2">
                    
                            <p:outputLabel for="layer" value="Layer Type:"/>
                            <p:selectOneMenu id="layer" value="#{EventController.badconditions.layer}" style="width:100px">
                                <f:selectItem itemLabel="Rainy" itemValue="rainy" />
                                <f:selectItem itemLabel="Cloudy" itemValue="cloudy" />
                                <f:selectItem itemLabel="Snowy" itemValue="snowy" />
                            </p:selectOneMenu>
                            
                        </h:panelGrid>
                        
                            <!-- bad weather advance setting -->
                        
                        <h:panelGrid cellpadding="10px" width="450px" columns="6">
                        
                            <p:selectBooleanCheckbox id="temperaturecheck" value="#{EventController.temp}"/>
                            <h:outputText value="Temperature"/>
                            <h:outputText id="temperatureoutput" value="#{EventController.badconditions.temperature} C" />
                            <h:inputHidden id="temperature" value="#{EventController.badconditions.temperature}" />
                            <h:outputText id="Clabel" value="C" />
                            <p:slider for="temperature" display="temperatureoutput" minValue="-20" maxValue="50" style="width: 150px" displayTemplate="{value}" />
                            
                            <p:selectBooleanCheckbox id="precipitationscheck" value="#{EventController.prec}"/>
                            <h:outputText value="Precipitations"/>
                            <h:outputText id="precipitationsoutput" value="#{EventController.badconditions.precipitations} mm" />
                            <h:inputHidden id="precipitations" value="#{EventController.badconditions.precipitations}" />
                            <h:outputText id="Plabel" value="mm" />
                            <p:slider  for="precipitations" display="precipitationsoutput" minValue="0" maxValue="50" style="width: 150px"  displayTemplate="{value}" />

                        </h:panelGrid>

                    </p:panel>
                    <br />
                    <br />


                    <h:panelGrid cellpadding="10px" width="450px" columns="4"> 
                        <p:selectBooleanCheckbox id="invitationcheck" value="#{EventController.inviteSelect}"/>     
                        <h:outputText value="Send an Invitation to:"/>
                        <p:ajax event="click" update="invitation" />                      
                        <p:inputTextarea class="notResize" id="invitation" counter="display" maxlength="500" counterTemplate="Example (mar83;da87) {0} characters remaining." disabled="#{!EventController.inviteSelect}" autoResize="false" rows="4" cols="27"  onselect="value=''" value="#{EventController.invitations}"/>
                        <h:outputText id="display" />
                    </h:panelGrid> 

                    <h:panelGrid style="margin-left: 20px" cellpadding="5px" width="450px" columns="6"> 

                        <h:outputText value="Event Color:"/>
                        <p:selectOneMenu id="color" value="#{EventController.event.color}" style="width:100px">
                            <f:selectItem itemLabel="Red" itemValue="red" />
                            <f:selectItem itemLabel="Pink" itemValue="pink" />
                            <f:selectItem itemLabel="Blue" itemValue="blue" />
                            <f:selectItem itemLabel="Green" itemValue="green" />
                            <f:selectItem itemLabel="Violet" itemValue="violet" />
                            <f:selectItem itemLabel="Orange" itemValue="orange" />
                            <f:selectItem itemLabel="Brown" itemValue="brown" />
                            <f:selectItem itemLabel="Gold" itemValue="gold" />
                        </p:selectOneMenu>
                        <p:message for="color" />

                        <h:outputText value="Set Event Privacy:"/>
                        <p:selectOneMenu id="privacy" value="#{EventController.event.privacy}" style="width:100px">
                            <f:selectItem itemLabel="Private" itemValue="private" />
                            <f:selectItem itemLabel="Public" itemValue="public" />
                        </p:selectOneMenu>
                        <p:message for="privacy" />

                    </h:panelGrid>

                    <h:panelGrid style="margin-left: 27px" cellpadding="5px" width="450px" columns="1"> 
                        <p:commandButton update="growl" value="#{EventController.formHeader}" ajax="true" validateClient="true" onstart="PF('creation').show()" onsuccess="PF('creation').hide()"  action="#{EventController.controlDataCreation()}" id="iconOnly" icon="ui-icon-calendar"/>
                    </h:panelGrid>

                    <p:dialog id="complete" widgetVar="complete" draggable="false" closable="false" resizable="false"  modal="true"  header="Success">
                        Operation Successful!!
                        <br />
                        <br />
                        <br />
                        <p:commandButton value="New Event" action="#{EventController.newEvent}"/>
                        <p:commandButton value="Home" action="#{scheduleController.loadOwnCalendar()}"/>
                    </p:dialog>
                    
                    

                </div> 

                <!-- dialog error -->

                <p:dialog header="Error" widgetVar="NoPast Error" minHeight="40" resizable="false" >
                    <h:outputText value="The Starting Date is before Today" />
                </p:dialog>

                <p:dialog header="Error" widgetVar="EndDate Error" minHeight="40" resizable="false" >
                    <h:outputText value="The ending date is before the starting date" />
                </p:dialog>

                <p:dialog header="Error" widgetVar="EndTime Error" minHeight="40" resizable="false" >
                    <h:outputText value="The ending time is before the starting time" />
                </p:dialog>

                <p:dialog header="Error" widgetVar="EndUntillDate Error" minHeight="40" resizable="false" >
                    <h:outputText value="The untill date is before the starting date" />
                </p:dialog>

                <p:dialog header="Error" widgetVar="Repeat Error" minHeight="40" resizable="false" >
                    <h:outputText value="You can not repeat an event that last more than 1 day for now" />
                </p:dialog>

                <p:dialog header="Error" widgetVar="Invite Error" minHeight="40" resizable="false" dynamic="true">
                    <h:outputText value="You haven't insert any User or these Users does not exist: #{EventController.rejectedUsers}" />
                </p:dialog>

                <p:dialog header="Error" widgetVar="StartTime Error" minHeight="40" resizable="false" >
                    <h:outputText value="The Starting Time is before the current Time!" />
                </p:dialog>

                <p:dialog header="Error" widgetVar="DateInTheMiddle Error" minHeight="40" resizable="false" >
                    <h:outputText value="There are some event in the middle of this one!!" />
                </p:dialog>

                <p:dialog header="Error" widgetVar="Untill Error" minHeight="40" resizable="false" >
                    <h:outputText value="You had chosen a repetition but you did not chose an untill date !!" />
                </p:dialog>

                <p:dialog header="Error" widgetVar="DateInTheMiddleRepeat Error" minHeight="40" resizable="false" >
                    <h:outputText value="There are some event in the middle of one of the events you want to create!!" />
                </p:dialog>



                <p:growl id="growl"  showDetail="true" sticky="true" />  
                <!-- dialog error -->

                <p:dialog  widgetVar="creation" modal="true" draggable="false" closable="false" resizable="false" showHeader="false" >
                    <h:outputText value="Managing your event" />
                    
                </p:dialog>


            </h:form>
    </body>
</html>
